<template>
  <MoreInfo title="自定义几何体">
    <el-link href="https://threejs.org/docs/?q=bufferG#api/zh/core/BufferGeometry" type="primary" target="_blank">BufferGeometry</el-link>
    <br>
    <br>
    第一步: 创建顶点位置和颜色数组
    <HighlightJS :code="code1"/>

    第二步: 将顶点位置和颜色添加到 geometry 的属性中
    <HighlightJS :code="code2" />

    第三步: 创建材质，开启顶点颜色
    <HighlightJS :code="code3" />

    第四步: 创建 Mesh 实例，将 geometry 和材质添加到 Mesh 实例中
    <HighlightJS :code="code4" />
  </MoreInfo>
</template>

<script setup>
import HighlightJS from '@/components/HighlightJS.vue'
import MoreInfo from '@/components/MoreInfo.vue'

const code1 = `
  const count = 5000
  const positionsArray = new Float32Array(count * 3 * 3)
  const colorsArray = new Float32Array(count * 3 * 3)
  for (let i = 0, len = count * 3 * 3; i < len; i++) {
    positionsArray[i] = Math.random() - 0.5
    colorsArray[i] = Math.random()
  }

  const positionsAttribute = new BufferAttribute(positionsArray, 3)
  const colorsAttribute = new BufferAttribute(colorsArray, 3)
`

const code2 = `
  const geometry = new BufferGeometry()
  geometry.setAttribute('position', positionsAttribute)
  geometry.setAttribute('color', colorsAttribute)
`

const code3 = `
  const material = new MeshBasicMaterial({
    // color: 0xff0000, // 如果不使用顶点颜色, 就用材质颜色
    vertexColors: true // 开启顶点颜色
  })
`

const code4 = `
  const mesh = new Mesh(geometry, material)
  scene.add(mesh)
`
</script>
